<template>
  <div>
    <h1>App根组件</h1>
    <my-table :data="goodslist">
      <template #header >
         <th>#</th>
         <th>商品名称</th>
        <th > 价格</th>
        <th >标签</th>
        <th >操作</th>   
      </template>

      <template #body="{row,index}">
          <th >{{index+1}}</th>
           <td>{{row.goods_name}}</td>
          <td>￥{{row.goods_price}}</td>
          <td>
            <input style="width:30px;display:inline;"  type="text" class="form-control form-control-sm form-ipt" v-if="row.inputVisible" v-focus
            v-model.trim.lazy="row.inputValue" @blur="onInputConfirm(row)" @keyup.enter="yes(row)" @click="row.inputValue==''">
            <button type="button" class="btn btn-primary btn-sm" v-else @click="row.inputVisible=true">+Tag</button>
            <span class="badge badge-warning ml-2" v-for="item1 in row.tags" :key="item1">{{item1}}</span></td>
          <td>
            <button type="button" class="btn btn-danger btn-sm" @click="onmove(row.id)">删除</button>
         </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './components/my-table/My-Table.vue'

export default {
  components: { MyTable },
  name:'MyApp',
  components:{
    MyTable
  },
  directives:{
    focus(e){e.focus() }
  },
  data(){
    return{
      goodslist:[]
    }
  },
  methods:{
    async getGoodsList(){
      const {data:res}=await this.$http.get('/api/goods')
      if(res.status !==0) return console.log("请求数据失败");
      this.goodslist=res.data
      // console.log(res);
    },
    onmove(id){
        this.goodslist=this.goodslist.filter(x=>x.id!==id)
    },
    onInputConfirm(row){
      let val=row.inputValue
      row.inputValue=''
      row.inputVisible=false
      if(!val || row.tags.indexOf(val)!==-1) return
      row.tags.push(val)
    },
    yes(row){
      this.onInputConfirm(row)
    }
   
  },
  created(){
    this.getGoodsList()
    
  }

}
</script>

<style lang="less" scoped>

</style>